// 1. 导入路由的api
import {createRouter, createWebHashHistory} from 'vue-router'
// 2. 导入页面
const Home = ()=> import('@/views/Home.vue')
const About = ()=> import('@/views/About.vue')
const NotFound = () => import('@/views/404.vue')
// 引入用户中心
const userCenter = () => import('@/views/user-center/Index.vue')
const userProfile = () => import('@/views/user-center/Profile.vue')
const userSettings = () => import('@/views/user-center/Settings.vue')
// 引入ElementTest页
const ElementTest = () => import('@/views/ElementTest.vue') 
// 3. 创建路由的配置
const routeConfig = [
    {
        path:'/home',
        component: Home,
        name:'home'
    },
    {
        path:'/about',
        component:About,
        name:'about'
    },
    // 用户中心
  {
    path: '/user',
    name: 'user',
    component: userCenter,
    redirect: '/user/profile',
    children: [
      {
        path: 'profile',
        name: 'profile',
        component: userProfile
      },
      {
        path: 'settings',
        name: 'settings',
        component: userSettings
      },
    ]
    },
  
    {
        path:'/element',
        component: ElementTest,
        name:'element'  
    },
    {
        path:'/:patchMatch(.*)*',
        name:'not found',
        component: NotFound
    }
]
// 4. 创建路由实例化对象并对外暴露
const router = createRouter({
    history: createWebHashHistory(), // 创建了一个hash路由
    routes: routeConfig
})

// 前置导航守卫
router.beforeEach((to, from)=>{
    console.log('to',to);
    console.log('from',from);
})

// 后置导航守卫
router.afterEach((to, from)=>{
    console.log('to=========',to);
    console.log('from========',from);
})

// 对外暴露
export default router